<template>
  <div class="index-page">
    <div class="top">
      <el-card v-for="item in topList" :key="item.id">
        <div class="name">{{ item.name }}</div>
        <div class="total">{{ item.increment }}</div>
      </el-card>
    </div>
    <div class="center">
      <el-card class="user-total-echart">
        <div
          id="userTotalEchart"
          height="400"
          style="width: 100%; height: 360px"
        ></div>
      </el-card>
    </div>
    <div class="bottom">
      <el-card class="income-total-echart">
        <div
          id="incomeTotalEchart"
          height="400"
          style="width: 100%; height: 360px"
        ></div>
      </el-card>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import { getIndexPageData } from "../../api/device.api";

const topList = ref([
  {
    id: 1,
    name: "本月新增用户",
    total: 0,
    increment: 0,
  },
  {
    id: 2,
    name: "本月新增设备",
    total: 0,
    increment: 0,
  },
  {
    id: 3,
    name: "本月告警数",
    total: 0,
    increment: 0,
  },
  {
    id: 3,
    name: "本月充值金额",
    total: 0,
    increment: 0,
  },
]);

let userTotalChartDom = null;
let userTotalChart: any = null;
let incomeTotalChartDom = null;
let incomeTotalChart: any = null;
let timer: any = null;
let indexPageData = ref({});
onMounted(() => {
  getIndexPageData({}).then((res) => {
    indexPageData.value = res;
    topList.value[0].total = res.monthIserCount || 0;
    topList.value[1].total = res.monthDeviceCount || 0;
    topList.value[2].total = res.monthAlarmCount || 0;
    topList.value[3].total = (res.monthChargeCount || 0) / 100;
  });

  userTotalChartDom = document.getElementById("userTotalEchart");
  userTotalChart = echarts.init(userTotalChartDom);
  initUserTotalChart();

  incomeTotalChartDom = document.getElementById("incomeTotalEchart");
  incomeTotalChart = echarts.init(incomeTotalChartDom);
  initIncomeTotalChart();

  if (timer) {
    clearInterval(timer);
  }

  let isRemove = false;
  let increment_unit = 7;
  timer = setInterval(() => {
    topList.value = topList.value.map((item) => {
      isRemove = true;
      let leave = item.total - item.increment;
      if (leave > 10000) {
        increment_unit = 121;
      } else if (leave > 1000) {
        increment_unit = 21;
      } else if (leave > 100) {
        increment_unit = 7;
      }
      if (item.total - item.increment >= increment_unit) {
        item.increment += increment_unit;
      } else if (
        item.total - item.increment < increment_unit &&
        item.total > item.increment
      ) {
        item.increment++;
      }
      return item;
    });
  });
});

const initIncomeTotalChart = () => {
  const options = {
    title: {
      text: "每月销售额",
      left: "center",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    grid: {
      left: "0%",
      right: "2%",
      bottom: "3%",
      containLabel: true,
    },

    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: [
          "一月",
          "二月",
          "三月",
          "四月",
          "五月",
          "六月",
          "七月",
          "八月",
          "九月",
          "十月",
          "十一月",
          "十二月",
        ],
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        name: "Email",
        type: "line",
        stack: "Total",
        smooth: true, //曲线平滑
        emphasis: {
          focus: "series",
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(64,158,255,0.7)",
            },
            {
              offset: 1,
              color: "rgba(64,158,255,0.05)",
            },
          ]),
        },
        itemStyle: {
          normal: {
            color: "#409EFF", //改变折线点的颜色
            lineStyle: {
              color: "#409EFF", //改变折线颜色
            },
          },
        },
        data: [120, 200, 150, 30, 70, 110, 130, 120, 200, 150, 80, 70],
      },
    ],
  };
  incomeTotalChart.setOption(options);
};

const initUserTotalChart = () => {
  const options = {
    title: {
      left: "center",
      text: "每月设备活跃数",
    },
    grid: {
      left: "0%",
      right: "0",
      bottom: "60px",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月",
      ],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        itemStyle: {
          normal: {
            color: "#409EFF", //改变折线点的颜色
            lineStyle: {
              color: "#409EFF", //改变折线颜色
            },
          },
        },
        data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70],
        type: "bar",
      },
    ],
  };
  userTotalChart.setOption(options);
};
</script>
<style lang="scss" scoped>
.top {
  display: flex;
  height: 110px;
  .name {
    font-size: 16px;
  }

  .total {
    font-size: 24px;
    margin-top: 20px;
    font-weight: bold;
  }
  > div {
    flex: 1;
    margin-right: 12px;

    &:last-child {
      margin-right: 0;
    }
  }
}

.center {
  margin-top: 12px;

  .user-total-echart {
    height: 344px;

    .title {
      font-size: 18px;
      font-weight: bold;
      text-align: center;
    }
  }
}

.bottom {
  margin: 12px 0;
}
</style>
